iT邦幫忙

2023 iThome 鐵人賽

DAY 1
1
Vue.js

試試用Vue建立網站吧系列 第 1

Day1-試試Vue3-初衷與目標

  • 分享至 

  • xImage
  •  

技術背景
資料庫工程師轉前端技術。所學從六角學院修習切版、 JavaScript 、 Vue 三種前端技術。

參賽初衷
所學至今跟著課程作業有作出一些網站前後台模板,為持續學習於是參加第 15 屆鐵人賽,從 Vue 主題試著用框架技術建構網站,從中複習切版、 JavaScript。

該系列文章核心
不從 Vue 基礎知識點分類介紹,著重於用 Vue3 建構一網站,參考網路共享資源跟著 Step-by-Step 練習實作。開發習慣會以六角學院所學為主,文章內會分享程式碼與各知識點。期望「試試用Vue建立網站吧」系列文章能協助剛學完 Vue 想練練手的前端小白(因 Vue 框架底層是 JavaScript 技術,建議有底子的小白服用)。

主題與學習目標
以虛擬集團餐廳會員網站為主題開發前後台頁面,練習使用框架進行關注點分離,即資料與畫面分離、資料與方法分離為概念開發,並嘗試加入 Pinia 跨元件狀態管理工具將元件統一管理。

開發工具介紹

  • 作業系統:Windows 11(64 bit)
  • 開發工具:Visual Studio(版本1.82.10)
    • Visual Studio 用到的套件 (後續有用到其他套件將於往後各篇補上)
      • Vetur:Vue 官方提供的 Vue 整合插件,能提示 Vue 語法錯誤處與校正建議。
      • Vue 3 Snippets:開發者透過縮寫,套件會自動展開成相應的 Vue 3 代碼結構,幫助開發者更快速地編寫代碼。
  • JavaScript 框架:Vue 3(Options API寫法)
  • Vue3 建構工具(預處理器):Vite (需 Node.js 版本14.18以上。下載 LTS 長期穩定維護版本即可)
  • 切版框架:Bootstrap 5

專案情境
以一餐飲集團為背景,提供集團會員紀錄喜愛的旗下餐廳與評論。前後台頁面的功能說明如下。

  • 前台使用者頁面
    • 口袋餐廳:提供會員建立喜愛的集團餐飲品牌清單(即口袋餐廳)。會員具有新增與移除列表項目的權限。
    • 餐廳實評:根據口袋餐廳建立的清單,提供會員對其紀錄實際用餐體驗。會員具有新增與修改評論的權限。
  • 後台管理者頁面
    • 管理餐廳列表:管理者具有新增與移除集團餐廳的權限。

注意:本系列每篇文章會以各功能頁面為篇名介紹,如何開發該功能頁面、建立相應 API (本系列旨在練習開發前端畫面。採用 json-server 方式建立簡單的 API ,不對後端邏輯 API 進行開發與說明)、路由表等。


下一篇
Day2-試試Vue3-建立vite專案
系列文
試試用Vue建立網站吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
arguskao
iT邦新手 3 級 ‧ 2023-09-16 13:15:21

看到六角學院,馬上就訂閱了

我要留言

立即登入留言